<template>
  <div id="indexTaskDetail">
    <div class="task_detail_title">
      <div class="task_title_left">
        <div class="title">
          <span>丰茂烤串[昌平店]第三期</span>
          <span class="blod">晚高峰任务</span>
        </div>
        <div class="money">
          <span class="font_logo">奖</span>
          <span class="money_num">￥25</span>
        </div>
      </div>
      <div class="task_title_right">
        <!--<span class="sum_btn">余量：90</span>-->
        <span class="no_btn">已领完</span>
      </div>
    </div>
    <div class="detail_inner">
      <!--任务描述-->
      <div class="task_des border">
        <div class="des_title">
          <span>任务描述</span>
        </div>
        <div class="des_item">
          <span class="des_left name">任务名称:</span>
          <span class="des_right two">海底捞底海底捞底捞门店调研</span>
        </div>
        <div class="des_item">
          <span class="des_left">结束时间:</span>
          <span class="des_right">04.18 12:30</span>
        </div>
        <div class="des_item">
          <span class="des_left">任务发起:</span>
          <span class="des_right">第九神秘顾客平台</span>
        </div>
        <div class="des_item">
          <span class="des_left name">门店地址:</span>
          <span class="des_right two">北京市海淀区东北旺西路北口北京市海淀区东北旺西路北口北京市海淀区东北旺西路北口北京市海淀区东北旺西路北口</span>
        </div>
        <div class="des_item">
          <span class="des_left">是否限制报名距离:</span>
          <span class="des_right">是 小于10km</span>
        </div>
      </div>
      <!--任务详情-->
      <div class="task_des border">
        <div class="des_title">
          <span>任务详情</span>
        </div>

        <div class="des_item">
          <span class="des_left des_detail">
            <span class="first_title">·</span>
            食堂门店使用就餐时间为3月28日-4月20日之间
          </span>
        </div>
        <div class="des_item">
          <span class="des_left des_detail">1. 为3月28日-4月20日之间</span>
        </div>
        <div class="des_item">
          <span class="des_left des_detail">2. 食堂门店使用就餐时间日之间</span>
        </div>
        <div class="des_item">
          <span class="des_left des_detail">3. 4月20日之间</span>
        </div>
        <div class="des_item">
          <span class="des_left des_detail">4. 食堂门店使用就餐时间为3月28日-4月20日之间</span>
        </div>
      </div>
      <!--任务要求-->
      <div class="task_ask border">
        <div class="des_title">
          <span>任务要求</span>
        </div>
        <div class="des_item">
          <span class="ti">提</span>
          <span class="ask_time">提交时间</span>
          <span class="tip_blue">海底捞门店调研</span>
        </div>
        <div class="des_item">
          <span class="ti">执</span>
          <span class="ask_time">执行时长</span>
          <span class="tip_blue">领取任务后48小时提交报告</span>
        </div>
        <div class="des_item">
          <span class="ti">签</span>
          <span class="ask_time">签到签出</span>
          <span class="tip_blue">该任务不需要签到签出</span>
        </div>
      </div>
      <!--培训学习-->
      <div class="study border">
        <div class="des_title">
          <span>培训学习</span>
        </div>
        <div class="des_item" @click="goLearn(1)">
          <span class="des_left">1.学习资料</span>
          <span class="icon">
            <van-icon name="arrow" />
          </span>
        </div>
        <div class="des_item">
          <span class="des_left">2.学习资料2</span>
          <span class="icon">
            <van-icon name="arrow" />
          </span>
        </div>
      </div>
      <!--小测试预览-->
      <div class="test_sh border">
        <div class="des_title" @click="goTest(1)">
          <span class="test">小测试预览</span>
          <span class="icon_inner">
            <van-icon name="arrow" />
          </span>
        </div>
      </div>
      <div class="rep border">
        <div class="des_title" @click="goReport(1)">
          <span class="test">报告预览</span>
          <span class="icon_inner">
            <van-icon name="arrow" />
          </span>
        </div>
      </div>
      <div class="deal border">
        <van-radio name="1" shape="square" icon-size="12px" v-model="radio" @click="readAll">我已阅读</van-radio>
        <span class="deal_text" @click="pShowUseDeal">软件使用协议</span>
      </div>
    </div>
    <div class="receive_btn">
      <div style="height: 5px;background: #fff"></div>
      <van-button
        color="linear-gradient(to right, #4bb0ff, #6149f6)"
        @click="receiver(1)"
        block
        round
        class="receiver"
      >领取</van-button>
    </div>
    <!--用户协议-->
    <van-dialog
      use-slot
      :show="pShow"
      confirm-button-open-type="getUserInfo"
      @close="onClose"
      @getuserinfo="getUserInfo"
    >
      <div style="text-align: center;font-size: 16px;font-weight: bolder;line-height: 24px;">软件使用协议</div>
      <div style="font-size: 12px;text-indent: 24px;box-sizing: border-box;padding: 0 10px;">
        有赞是一家零售科技公司，致力于成为商家服务领域里最被信任的引领者
        有赞是一家零售科技公司，致力于成为商家服务领域里最被信任的引领者
        有赞是一家零售科技公司，致力于成为商家服务领域里最被信任的引领者
        有赞是一家零售科技公司，致力于成为商家服务领域里最被信任的引领者
        有赞是一家零售科技公司，致力于成为商家服务领域里最被信任的引领者
        有赞是一家零售科技公司，致力于成为商家服务领域里最被信任的引领者
        有赞是一家零售科技公司，致力于成为商家服务领域里最被信任的引领者
        有赞是一家零售科技公司，致力于成为商家服务领域里最被信任的引领者
        有赞是一家零售科技公司，致力于成为商家服务领域里最被信任的引领者
        有赞是一家零售科技公司，致力于成为商家服务领域里最被信任的引领者
        有赞是一家零售科技公司，致力于成为商家服务领域里最被信任的引领者
        有赞是一家零售科技公司，致力于成为商家服务领域里最被信任的引领者
        有赞是一家零售科技公司，致力于成为商家服务领域里最被信任的引领者
        有赞是一家零售科技公司，致力于成为商家服务领域里最被信任的引领者
        有赞是一家零售科技公司，致力于成为商家服务领域里最被信任的引领者
      </div>
    </van-dialog>
    <!--点击领取按钮之后的弹窗提示-->
    <van-dialog id="van-dialog" />
  </div>
</template>
<script>
import Dialog from "@/../static/vant/dialog/dialog";
import getUserInfo from "../../utils/getUserInfo";
import { get } from "../../utils/request";
import { setStorage, getStorage } from "../../utils/storage";

export default {
  data() {
    return {
      userInfo: {},
      pShow: false,
      radio: "1", //  1选中 true，0未选中false
      openid: ""
    };
  },
  mounted() {},
  methods: {
    readAll() {
      if (this.radio == "1") {
        this.radio = "0";
      } else {
        this.radio = "1";
      }
    },
    receiver(status) {
      if (status == 1) {
        Dialog.confirm({
          confirmButtonText: "确定领取",
          cancelButtonText: "放弃领取",
          message:
            "您已经领取了" + status + "晚高峰任务！\n您在签到时 必须使用本手机"
        })
          .then(() => {
            // on close
            // on confirm
          })
          .catch(() => {
            // on cancel
          });
      } else {
        Dialog.alert({
          message: "该任务已被领完，下次早点来哦！☹"
        }).then(() => {
          // on close
          // on confirm
        }); /*.catch(() => {
          // on cancel
        });*/
      }
    },
    goLearn(index) {
      wx.navigateTo({
        url: "/pages/learnDetail/main"
      });
    },
    goTest(index) {
      wx.navigateTo({
        url: "/pages/testDetail/main"
      });
    },
    goReport(index) {
      wx.navigateTo({
        url: "/pages/reportDetail/main"
      });
    },
    pShowUseDeal() {
      this.pShow = true;
    },
    getUserInfo(event) {
      console.log(event.mp.detail);
    },
    onClose(event) {
      if (event.mp.detail === "confirm") {
        // 异步关闭弹窗
        setTimeout(() => {
          this.pShow = false;
        }, 1000);
      } else {
        this.pShow = false;
      }
    },
    toScan() {
      wx.navigateTo({
        url: "/pages/scan/main"
      });
    }
  }
};
</script>
<style lang="less">
#indexTaskDetail {
  width: 100%;
  overflow: hidden;
  .task_detail_title {
    height: 73px;
    border-bottom: 10px solid #f9f9f9;
    overflow: hidden;
    padding-left: 18px;
    .task_title_left {
      float: left;
      .title {
        height: 36px;
        line-height: 36px;
        color: #333333;
        font-size: 14px;
        & > span {
          display: inline-block;
        }
        .blod {
          font-weight: bolder;
        }
      }
      .money {
        height: 36px;
        & > span {
          display: inline-block;
        }
        .font_logo {
          width: 20px;
          height: 15px;
          line-height: 15px;
          text-align: center;
          border-radius: 8px 8px 8px 0px;
          background: #db4a37;
          font-size: 10px;
          color: #fff;
        }
        .money_num {
          width: 50px;
          height: 25px;
          line-height: 25px;
          color: #db4a37;
          box-sizing: border-box;
          padding-left: 10px;
          font-size: 14px;
        }
      }
    }
    .task_title_right {
      float: right;
      width: 90px;
      height: 100%;
      text-align: center;
      line-height: 73px;
      .sum_btn {
        display: inline-block;
        width: 54px;
        height: 18px;
        line-height: 18px;
        background: #226df0;
        color: #fff;
        font-size: 10px;
        border-radius: 9px;
        text-align: center;
      }
      .no_btn {
        display: inline-block;
        width: 54px;
        height: 18px;
        line-height: 18px;
        background: #9a9898;
        color: #fff;
        font-size: 12px;
        border-radius: 9px;
        text-align: center;
      }
    }
  }
  .detail_inner {
    .border {
      border: 5px solid #f9f9f9;
      padding: 15px;
      box-sizing: border-box;
    }
    .task_des {
      width: 100%;
      .des_title {
        height: 30px;
        line-height: 30px;
        & > span {
          width: 76px;
          height: 14px;
          line-height: 14px;
          text-align: center;
          border-left: 4px solid #5696ff;
          display: inline-block;
          font-weight: bolder;
          font-size: 14px;
        }
      }
      .des_item {
        margin-left: 8px;
        box-sizing: border-box;

        .des_left {
          height: 30px;
          line-height: 30px;
          font-size: 12px;
          color: #333;
          text-align: left;
          &.name {
            float: left;
          }
          .first_title {
            display: inline-block;
            color: #5696ff;
            font-weight: bolder;
          }
          &.des_detail {
            width: 100%;
          }
        }
        .des_right {
          margin-left: 12px;
          font-size: 12px;
          color: #333;
          text-align: left;
          &.two {
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-box-pack: center;
            -webkit-box-align: left;
            -webkit-line-clamp: 2;
            overflow: hidden;
            width: 79%;
            float: left;
            height: 33px;
          }
        }
      }
    }

    .task_ask {
      .des_title {
        height: 30px;
        line-height: 30px;
        & > span {
          width: 76px;
          height: 14px;
          line-height: 14px;
          text-align: center;
          border-left: 4px solid #5696ff;
          display: inline-block;
          font-weight: bolder;
          font-size: 14px;
        }
      }
      .des_item {
        height: 30px;
        line-height: 30px;
        margin-left: 8px;
        box-sizing: border-box;
        .ti {
          display: inline-block;
          text-align: center;
          width: 16px;
          height: 16px;
          line-height: 16px;
          border-radius: 50%;
          border: 1px solid #5696ff;
          color: #5696ff;
          font-size: 10px;
        }
        .ask_time {
          width: 70px;
          font-size: 12px;
          color: #333;
          text-align: center;
          margin-left: 10px;
        }
        .tip_blue {
          width: 200px;
          margin-left: 35px;
          font-size: 12px;
          color: #5696ff;
          text-align: center;
          display: inline-block;
        }
      }
    }
    .study {
      .des_title {
        height: 20px;
        line-height: 20px;
        & > span {
          width: 76px;
          height: 14px;
          line-height: 14px;
          border-left: 4px solid #5696ff;
          text-align: center;
          display: inline-block;
          font-weight: bolder;
          font-size: 14px;
        }
        .icon_inner {
          display: block;
          float: right;
          color: #999;
        }
      }
      .des_item {
        height: 30px;
        line-height: 30px;
        margin-left: 8px;
        box-sizing: border-box;
        .des_left {
          font-size: 12px;
          color: #333;
          text-align: left;
        }
        .icon {
          display: block;
          float: right;
          color: #999;
        }
      }
    }
    .test_sh {
      .des_title {
        height: 20px;
        line-height: 20px;
        & > .test {
          width: 88px;
          height: 14px;
          line-height: 14px;
          border-left: 4px solid #5696ff;
          text-align: center;
          display: inline-block;
          font-weight: bolder;
          font-size: 14px;
        }
        .icon_inner {
          display: block;
          float: right;
          color: #999;
        }
      }
    }
    .rep {
      .des_title {
        height: 20px;
        line-height: 20px;
        & > .test {
          width: 76px;
          height: 14px;
          line-height: 14px;
          border-left: 4px solid #5696ff;
          text-align: center;
          display: inline-block;
          font-weight: bolder;
          font-size: 14px;
        }
        .icon_inner {
          display: block;
          float: right;
          color: #999;
        }
      }
    }
    .deal {
      font-size: 12px;
      position: relative;
      .van-radio__label {
        color: #3479f4;
      }
      .deal_text {
        display: block;
        color: #3479f4;
        position: absolute;
        top: 35rpx;
        left: 95px;
      }
    }
  }
  .receive_btn {
    height: 40px;
    line-height: 40px;
    .receiver {
      /*margin-top: 20rpx;*/
      .van-button--round {
        height: 64rpx;
        width: 64%;
      }
    }
  }
}
</style>

